<template>
  <div class="page">
    <div class="container">
      <div class="item top"></div>
      <div class="item right"></div>
      <div class="item bottom"></div>
      <div class="item left"></div>
    </div>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="100" :h="100" @dragging="onDrag" @resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vue-draggable-resizable>
  </div>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  name: 'App',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>

<style lang="scss" scoped>
div{
  box-sizing: border-box;
}
.page{
  padding: auto;
  .container{
    height: 200px;
    width: 1200px;
    padding: 5px;
    background-color: #000;
    position: relative;
    .item{

      position: absolute;
      background: url('~@/assets/bg.png') repeat-x;
      animation:animations 2s linear infinite;
      &.top{
        top: 0;
        left: 0;
        height: 8px;
        width: 1200px;
      }
      &.right{
        top: -4px;
        left: calc(1200px - 4px);
        height: 8px;
        width: 200px;
        transform-origin: left center;
        transform: rotate(90deg);
      }
      &.bottom{
        bottom:0;
        left: 0;
        height: 8px;
        width: 1200px;
        transform: rotate(180deg);
      }
      &.left{
        top: calc(200px - 4px);
        left: 4px;
        height: 8px;
        width: 200px;
        transform-origin: left center;
        transform: rotate(-90deg);
      }
    }
  }

}
@keyframes animations{
  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: 32px;
  }
}
</style>
